<template>
    <h2>显示物资采购</h2>
    <p>
        货物名称：
        <el-input v-model="info.sPCargoName" style="width: 120px" placeholder="货物名称" />
        材质：
        <el-select v-model="info.sPMateriaLquality" clearable placeholder="Select" style="width: 120px">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in MateriaLquality" :key="item.mmteriaLqualityID" :label="item.materiaLqualityName"
                :value="item.mmteriaLqualityID" />
        </el-select>
        产地——国家：
        <el-select v-model="info.sPNationID" clearable placeholder="Select" style="width: 120px"
            @change="Provincelist()">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in Nation" :key="item.nationID" :label="item.nationName" :value="item.nationID" />
        </el-select>
        产地——省：
        <el-select v-model="info.sPProvinceID" clearable placeholder="Select" style="width: 120px">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in Provincel" :key="item.provinceID" :label="item.provinceName"
                :value="item.provinceID" />
        </el-select>
        申请人：
        <el-input v-model="info.createName" style="width: 120px" placeholder="创建人" />
        <el-button type="primary" @click="SuppliesPurchasingList(purid)">查询</el-button>
        <el-button @click="chengzhi()">重置</el-button>

    </p>
    
    <p style="background-color: aquamarine;">
        <el-row>
            <el-col :span="4">
                <el-button @click="SuppliesPurchasingList(purid=0)" style="background-color: aquamarine;">全部</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="SuppliesPurchasingList(purid=1)" style="background-color: aquamarine;">待审批</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="SuppliesPurchasingList(purid=2)" style="background-color: aquamarine;">已审批</el-button>
            </el-col>
        </el-row>
    </p>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="sPCargoName" label="货物名称" />
        <el-table-column prop="sPTypeID" label="类型">
            <template v-slot="script">
                {{ script.row.typeName }}
            </template>
        </el-table-column>
        <el-table-column prop="sPMateriaLquality" label="材质">
            <template v-slot="script">
                {{ script.row.materiaLqualityName }}
            </template>
        </el-table-column>
        <el-table-column prop="sPGaugeLattice" label="规格" />
        <el-table-column prop="date" label="产地">
            <template v-slot="script">
                {{ script.row.nationName }}-{{ script.row.provinceName }}
            </template>
        </el-table-column>
        <el-table-column prop="sPQuantity" label="数量" />
        <el-table-column prop="sPPurposeDescription" label="用途描述" />
        <el-table-column prop="createName" label="申请人" />
        <el-table-column prop="sPExpectedDeliveryDate" label="期望交付日期">
            <template v-slot="script">
                {{ script.row.sPExpectedDeliveryDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="sPReserveNote" label="备注" />
        <el-table-column prop="createDate" label="创建时间">
            <template v-slot="script">
                {{ script.row.createDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="sPApprovalStatus" label="审批状态">
            <template v-slot="script">
                <span v-if="script.row.sPApprovalStatus == 10">待审批</span>
                <span v-if="script.row.sPApprovalStatus == 20">已通过</span>
                <span v-if="script.row.sPApprovalStatus == 30">已拒绝</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="审批人">
            <template v-slot="script">
                <span v-if="script.row.sPApprover == 'string' || script.row.sPApprover == null">-</span>
                <span v-else>{{ script.row.sPApprover }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="240px">
            <template v-slot="script">
                <a @click="tiaoc(script.row.sPCargoID, script.row.sPApprovalStatus,script.row.sPCargoName)">查看</a> &nbsp;
                <el-button :disabled="script.row.sPApprovalStatus>10" @click="spupdate(script.row.sPCargoID, 20)" type="primary">通过</el-button>
                <el-button :disabled="script.row.sPApprovalStatus>10" @click="spupdate(script.row.sPCargoID, 30)" type="primary">拒绝</el-button>
            </template>
        </el-table-column>
    </el-table>




    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="total,slot, sizes"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            ,每页显示{{ page.pageSzen }},共{{ page.pageiden }}/{{ page.pageCount }}页
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot, prev, pager, next"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == 1" @click="page.pageiden = 1">首页</button>
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot,jumper"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == page.pageCount"
                                @click="page.pageiden = page.pageCount">尾页</button>
                        </template>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

//显示列表
const tableData = ref([])
//多选
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
//生命函数钩
onMounted(() => {
    //物资采购显示
    SuppliesPurchasingList(purid);
    //显示材 质
    MateriaLqualitylist();
    //显示产 地：国家
    Nationlist();
})
let purid=0;
//条件
const info = reactive({
    sPCargoName: "",//货物名称
    sPMateriaLquality: 0,//材 质
    sPNationID: 0,//产 地：国家
    sPProvinceID: 0,//产 地：省
    createName: "",//创建人
    sPApprovalStatus: 0//审批状态
})
//条件重置
const chengzhi = () => {
    info.sPCargoName = "";//货物名称
    info.sPMateriaLquality = 0;//材 质
    info.sPNationID = 0;//产 地：国家
    info.sPProvinceID = 0;//产 地：省
    info.createName = "";//创建人
    info.sPApprovalStatus = 0;//审批状态
    SuppliesPurchasingList(purid)
}
//分页
const page = reactive({
    pageiden: 1,//页码
    pageSzen: 3,//页容量
    totaCount: 0,//总数据
    pageCount: 0//总页码
})
//执行分页
watch(page, () => {
    SuppliesPurchasingList(purid)
})
//显示材 质
const MateriaLquality = ref([])
const MateriaLqualitylist = () => {
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/Public/MateriaLqualitylist").then(res => {
        MateriaLquality.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：国家
const Nation = ref([])
const Nationlist = () => {
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/Public/Nationlist").then(res => {
        Nation.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：省
const Provincel = ref([])
const Provincelist = () => {
    info.sPProvinceID = 0;
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/Public/Provincelist?nationID=" + info.sPNationID).then(res => {
        Provincel.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}

//物资采购显示
const SuppliesPurchasingList = (id:number) => {
    if(id==1){
        info.sPApprovalStatus=1
    }
    if(id==2){
        info.sPApprovalStatus=2
    }
    if(id==0){
        info.sPApprovalStatus=0
    }
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/SuppliesPurchasing/GetPurchaseStatus", {
        params: {
            pageIndex: page.pageiden,
            pageSize: page.pageSzen,
            sPCargoName: info.sPCargoName,
            sPMateriaLquality: info.sPMateriaLquality,
            sPNationID: info.sPNationID,
            sPProvinceID: info.sPProvinceID,
            createName: info.createName,
            sPApprovalStatus: info.sPApprovalStatus,
        }
    }).then(res => {
        page.totaCount = res.data.data.totaCount;
        page.pageCount = res.data.data.pageCount;
        tableData.value = res.data.data.values;
        console.log(res.data.data)
    }).catch(err => {
        console.log(err)
    })
}


const spupdate = (sPCargoID: number, sPApprovalStatus: number) => {
    axios.post("http://10.223.8.2:8000/Material/api/SuppliesPurchasing/UPdApprovalStatus?sPCargoID=" + sPCargoID + "&sPApprovalStatus=" + sPApprovalStatus)
    .then(res => {
        if (res.data.data > 0) {
        ElMessage.success("提交成功")
        SuppliesPurchasingList(purid);
      }
      else {
        ElMessage.error("提交成功") 
        SuppliesPurchasingList(purid);
      }
    })
}
const tiaoc = (sPCargoID: number, sPApprovalStatus: number,sPCargoName:any) => {
    if (sPApprovalStatus == 10) {
        router.push({
            name: "PurchasingUpdateList",
            query: {
                id: sPCargoID,
                name:sPCargoName
            }
        })
    }
    else if (sPApprovalStatus == 20 || sPApprovalStatus == 30) {
        router.push({
            name: "PurchasingTj",
            query: {
                id: sPCargoID,
                status:sPApprovalStatus
            }
        })
    }
}
</script>

<style></style>